<template>
  <!-- 动态数据源配置 -->
  <FGDialog ref="FGDialog" title="动态数据" width="900px" top="8vh" @confirm="confirm">
    <el-tabs v-model="active" tab-position="left" class="Fg-data-config">
      <el-tab-pane label="请求配置">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small">
          <el-form-item label="请求链接" prop="url">
            <el-input v-model="form.url" maxlength="100"></el-input>
          </el-form-item>
          <el-form-item label="请求方式" prop="method">
            <el-radio-group v-model="form.method">
              <el-radio label="get">GET</el-radio>
              <el-radio label="post">POST</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="请求数据" prop="resource">
            <el-table v-show="requestData.length" :data="requestData" border size="small" stripe>
              <el-table-column prop="label" label="键名" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.label" maxlength="50" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="value" label="键值" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" maxlength="50" clearable></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120" align="center">
                <template slot-scope="scope">
                  <el-button @click="delRequest(scope.$index)" type="text">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button icon="el-icon-plus" @click="addRequest()" type="text">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">测试接口</el-button>
          </el-form-item>
          <JsonEditor v-if="responseData" :value="responseData" style="height:249px" />
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="数据处理">
        <CodeEditor
          v-if="active==1"
          v-model="form.response"
          mode="text/javascript"
          name="onParse"
          params="response"
          placeholder="// response 为接口请求成功时返回的数据"
        />
      </el-tab-pane>
      <el-tab-pane label="错误处理">
        <CodeEditor
          v-if="active==2"
          v-model="form.error"
          mode="text/javascript"
          name="onError"
          params="error"
          placeholder="// error 为接口请求失败时返回的数据"
        />
      </el-tab-pane>
    </el-tabs>
  </FGDialog>
</template>

<script>
import { deepClone } from "../utils";
import { requestUrl } from "@/api/data";
import JsonEditor from "@/components/editor/JsonEditor";
import CodeEditor from "@/components/editor/CodeEditor";

export default {
  name: "DataDialog",
  components: {
    JsonEditor,
    CodeEditor,
  },
  props: {
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      active: 0,
      form: {},
      requestData: [],
      responseData: null,
      rules: {
        url: [{ required: true, message: "请输入请求链接" }],
        method: [{ required: true, message: "请选择请求类型" }],
      },
    };
  },

  methods: {
    open() {
      this.form = deepClone(this.value);
      this.requestData = [];
      this.responseData = null;
      if (this.value.request) {
        for (const key in this.value.request) {
          this.requestData.push({ label: key, value: this.value.request[key] });
        }
      }
      this.$refs.FGDialog.open();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          requestUrl(this.form.url, this.form.method, this.form.request).then(
            (res) => {
              this.responseData = res.result;
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    confirm() {
      this.requestData.forEach((item) => {
        if (item.label) this.form.request[item.label] = item.value;
      });
      this.$emit("input", this.form);
      this.$refs.FGDialog.close();
    },
    addRequest() {
      this.requestData.push({ label: "", value: "" });
    },
    delRequest(index) {
      this.requestData.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" >
.Fg-data-config {
  height: 100%;
  .el-tabs__content {
    height: 100%;
  }
  .el-tab-pane {
    height: 100%;
    overflow: auto;
  }
}
</style>